<!-- A page that is used to test that a dynamic form fill doesn't trigger for credit card forms. -->
<form name="cc1.1" id="cc1" method="post">
  Name on card: <input type="text" name="cc-name" id="cc-name"><br>
  Credit card number: <input type="text" name="cc-num" id="cc-num"><br>
  Expiry Date: <select name="cc-exp-month" id="cc-exp-month">
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
    <option value="05">05</option>
    <option value="06">06</option>
    <option value="07">07</option>
    <option value="08">08</option>
    <option value="09">09</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
  </select>
  /
<select name="cc-exp-year" id="cc-exp-year" onchange="ExpChanged()">
    <option value="2010">2010</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
    <option value="2023">2023</option>
    <option value="2098">2098</option>
    <option value="2099">2099</option>
  </select>
  <br>
  CVC: <input name="cc-csc" id="cc-csc">
<br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit">
</form>

<script src="dynamic_form_utils.js"></script>
<script>

var notify_on_credit_card_name_input_appear = false;

function ExpChanged() {
  RemoveForm("cc1");

  var new_form =
    document.getElementById('cc1') ||
    document.createElement('form');
  new_form.setAttribute('method',"post");
  //new_form.setAttribute('action',"https://example.com/")
  new_form.setAttribute('name',"cc1.1");
  new_form.setAttribute('id', "cc1");

  var i = document.createElement("input");
  i.setAttribute('type',"text");
  i.setAttribute('name',"cc-name");
  i.setAttribute('id', "cc-name");
  i.setAttribute('autocomplete', 'cc-name');
  new_form.appendChild(i);

  i = document.createElement("input");
  i.setAttribute('type',"text");
  i.setAttribute('name',"cc-num");
  i.setAttribute('id', "cc-num");
  i.setAttribute('autocomplete', 'cc-number');
  new_form.appendChild(i);

  i = document.createElement("select");
  i.setAttribute('name',"cc-exp-month");
  i.setAttribute('id', "cc-exp-month");
  i.setAttribute('autocomplete', 'cc-exp-month');
  i.options[0] = new Option("01", "01");
  i.options[1] = new Option("02", "02");
  i.options[2] = new Option("03", "03");
  i.options[3] = new Option("04", "04");
  i.options[4] = new Option("05", "05");
  i.options[5] = new Option("06", "06");
  i.options[6] = new Option("07", "07");
  i.options[7] = new Option("08", "08");
  i.options[8] = new Option("09", "09");
  i.options[9] = new Option("10", "10");
  i.options[10] = new Option("11", "11");
  i.options[11] = new Option("12", "12");
  new_form.appendChild(i);

  i = document.createElement("select");
  i.setAttribute('name',"cc-exp-year");
  i.setAttribute('id', "cc-exp-year");
  i.setAttribute('autocomplete', 'cc-exp-year');
  i.options[0] = new Option("2010", "2010");
  i.options[1] = new Option("2998", "2998");
  i.options[2] = new Option("2999", "2999");
  new_form.appendChild(i);

  i = document.createElement("input");
  i.setAttribute('type',"text");
  i.setAttribute('name',"cc-csc");
  i.setAttribute('id', "cc-csc");
  i.setAttribute('autocomplete', 'cc-csc');
  new_form.appendChild(i);

  document.getElementsByTagName('body')[0].appendChild(new_form);

  if (notify_on_credit_card_name_input_appear) {
    // Give time to see if it fills.
    setTimeout(function() {
      window.domAutomationController.send(document.getElementById("cc-name").value != '');
    }, 1000);
  }
}

function hasRefilled() {
  var credit_card_name_input = document.getElementById('cc-name');
  if (credit_card_name_input) {
    setTimeout(function() {
      window.domAutomationController.send(credit_card_name_input.value != '');
    }, 1000);
  } else {
    notify_on_credit_card_name_input_appear = true;
  }
}

</script>
